<template>
  <div class='list-box'>
    <div class='list-header'>
      <p>
        <el-select v-model='value' placeholder='全部'>
          <el-option
            v-for='item in options'
            :key='item'
            :label='item'
            :value='item'
          >
          </el-option>
        </el-select>
        <el-input
          placeholder='请输入关键词'
          prefix-icon='el-icon-search'
          v-model='inputValue'
        >
        </el-input>
      </p>
      <p>
        <el-button type='warning' @click="addProject">新增</el-button>
        <el-button type='warning' @click="editProject">编辑</el-button>
        <el-button type='danger' @click='deleteBtn'>删除</el-button>
      </p>
    </div>
    <el-table
      :data='list'
      border
      @selection-change='handleSelectionChange'
      style='width: 100% margin-top: 20px'
    >
      <el-table-column
        type='selection'
        header-align='center'
        align='center'
        width='55'
      >
      </el-table-column>
      <el-table-column
        label='编号'
        header-align='center'
        align='center'
        width='160
      '
      >
        <template slot-scope='scope'>
          <el-link type='primary' @click="showProject(scope.row)">{{ scope.row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop='name'
        header-align='center'
        align='center'
        label='竞对名称'
      >
      </el-table-column>
      <el-table-column
        prop='person'
        header-align='center'
        align='center'
        label='销售人员'
      >
      </el-table-column>
      <el-table-column
        prop='layer'
        header-align='center'
        align='center'
        label='对接层级'
      >
      </el-table-column>
      <el-table-column
        prop='addr'
        header-align='center'
        align='center'
        label='工厂地址'
      >
      </el-table-column>
      <el-table-column
        prop='plan'
        header-align='center'
        align='center'
        label='主推方案'
      >
      </el-table-column>
      <el-table-column
        prop='isCooperation'
        header-align='center'
        align='center'
        label='前期是否有合作'
      >
      </el-table-column>
      <el-table-column
        prop='cooperationInfo'
        header-align='center'
        align='center'
        label='合作情况'
      >
      </el-table-column>
      <el-table-column
        prop='keyRelationships'
        header-align='center'
        align='center'
        label='关键关系人或支持者'
      >
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
    <StakeholdersList3Dialog ref="StakeholdersList3Dialog" />
  </div>
</template>

<script>
import StakeholdersList3Dialog from './StakeholdersList3Dialog.vue'
export default {
  components: { StakeholdersList3Dialog },
  data() {
    return {
      value: '',
      inputValue: '',
      list: [
        {
          id: '1',
          name: '客户名称',
          level: '客户级别',
          nature: '客户性质',
          entryName: '项目名称',
          industry: '项目或业主行业',
          suggestProducts: '建议推荐产品',
          money: 500,
          stage: '项目目前所处阶段',
          case: '过往典型行业或地区案例',
          demandPoints: '客户关键需求点',
          challenge: '目前项目推进存在的挑战',
          importantInformation: '重要信息记录',
          personList: [
            {
              id: '1',
              name: 'XXXXX',
              department: '部门',
              position: '职位',
              role: '角色',
              person: '建议我司对接人员'
            }
          ],
          aimList: [
            {
              id: '1',
              title: 'XXXXX',
              isReach: '是'
            }
          ],
          informationList: [
            {
              id: '1',
              name: '初设方案',
              person: '张总',
              status: '已于2024年6月8日完成'
            }
          ],
          actualList: [
            {
              id: '1',
              name: 'XXXXX',
              department: '部门',
              position: '职位',
              role: '角色',
              person: '我司实际对接人员'
            }
          ],
          actionList: [
            {
              id: '1',
              problem: '目前存在的问题',
              action: '行动内容1',
              person: '张总',
              time: '2024年6月8日'
            }
          ]
        }
      ],
      options: [
        '项目编号',
        '项目名称',
        '项目描述',
        '负责人',
        '创建日期',
        '最后修改日期',
        '其他'
      ],
      multipleSelection: []
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(val, a) {
      this.multipleSelection = val
    },
    deleteBtn() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.multipleSelection.map((obj) => {
          for (let i = this.list.length; i >= 0; i--) {
            const index = this.list.findIndex((item) => item.id === obj.id)
            if (index !== -1) this.list.splice(index, 1)
          }
        })
      }
    },
    showProject(item) {
      this.$refs.StakeholdersList3Dialog.handleOpen('show', item)
    },
    addProject() {
      this.$refs.StakeholdersList3Dialog.handleOpen('add', [])
    },
    editProject() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.$refs.StakeholdersList3Dialog.handleOpen('edit', this.multipleSelection[0])
      }
    }
  }
}
</script>
<style>
.list-box .list-header {
  margin-bottom: 15px;
  overflow: hidden;
}
.list-box .list-header > h2 {
  width: 50%;
  float: left;
}
.list-box .list-header > p:nth-of-type(1) {
  width: 50%;
  float: left;
}
.list-box .list-header > p:nth-of-type(1) .el-select {
  width: 140px;
}
.list-box .list-header > p:nth-of-type(2) {
  width: 50%;
  float: right;
  text-align: right;
}
.list-box .list-header > p:nth-of-type(1) .el-input {
  width: 250px;
  display: inline-block;
}
.list-box .el-button {
  padding: 8px 20px;
}
.list-box .el-button--warning, .list-box .el-button--warning:focus, .list-box .el-button--warning:hover {
  background: #ff8000;
  border-color: #ff8000;
}
.list-box .el-link--inner {
 padding: 0 10px;
}
.list-box .el-table .el-table__cell {
  padding: 2px 0;
}
.list-box .el-table thead {
  color: #000000;
}
.list-box .el-table--border .el-table__cell,
.list-box .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #000000;
}
.list-box .el-table td.el-table__cell,
.list-box  .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #000000;
}

.list-box  .el-table--border,
.list-box  .el-table--group {
  border: 2px solid #000000;
}
.list-box  .el-table {
  color: #000000;
}
.list-box .page-box {
  margin-top: 10PX;
}
.list-box .page-box .el-pagination {
  text-align: right;
}
</style>
